import { NavLink, Outlet, useLoaderData } from "react-router-dom";
// css module css模块化
// css in js  styled-components
// css 原子化
import style from './index.module.css'

function isActive({isActive}:{isActive:boolean}){
    return isActive ? style.active : ''
}
export default function Home() {
  const userInfo=useLoaderData() as {name:string,age:number}
  console.log('userinfo==>',userInfo)
  return (
    <div>
      <h1 className={style.title}>Home Page</h1>
      <h2>姓名：{userInfo.name}</h2>
      <h2>年龄：{userInfo.age}</h2>
      <NavLink to="about" className={isActive}>进入到AboutPage</NavLink>
      <NavLink to="user?username=张三&age=18" state={{ name: '李四', age: 16 }} className={isActive}>进入到UserPage</NavLink>
      <NavLink to="goods/1001" className={isActive}>进入到商品详情</NavLink>
      <Outlet/>
    </div>
  )
}
